<template>  
    <view class="container">  
        <view class="search-container">  
            <uni-icons type="search" size="36" class="search-icon" @click="searchUser"></uni-icons>  
            <input type="text" placeholder="请输入手机号" class="search-input" v-model="phone"/>  
        </view>  
        <view class="friend-list" v-if="dataList">  
            <view class="friend-item">
                <view class="avatar-row">
                    <image :src="dataList.avatar ? dataList.avatar : defaultAvatar" class="avatar" mode="aspectFill"></image>
                    <view class="info">
                        <view class="name-sign">
                            <view class="name">{{ dataList.nickName }}</view>
                            <view class="sign">{{ dataList.sign }}</view>
                        </view>
                    </view>
                </view>
				<button class="add-button" @click="add">添加</button>  
            </view>
        </view>  
    </view>  
</template>  
  
<script>  
export default {  
    onLoad() {  
        uni.setNavigationBarTitle({  
            title: '搜索好友'  
        });
    },  
    data() {  
        return {
            phone: '',  
            dataList: null,  // 初始化为 null
			defaultAvatar: '../static/tabs/my.png', // 默认头像地址
        }  
    },  
    methods: {  
        searchUser() {
            if (this.phone.trim() === '') {
                this.dataList = null;
                return;
            }
            uni.request({
                url: `http://localhost:8090/api/users/find/${this.phone}`,
                method: 'GET',
                success: (res) => {
                    console.log(res);
                    if (res.data.code === 200){ // 根据后端返回的数据结构判断查询是否成功
                        uni.showToast({
                            title: '已获取用户信息',
                            icon: 'success',
                        });
                        this.dataList = res.data.data; // 更新 dataList
                        console.log("dataList", this.dataList);
                    }
                    else{
                        uni.showToast({
                            title: '未找到该用户',
                            icon: 'fail',
                        });
                        console.log("dataList", this.dataList);
                        this.dataList = null;
                    }
                },
                fail: () => {
                    uni.showModal({
                        title: '网络错误',
                        content: '无法连接服务器，请检查网络连接！',
                    });
                }
            });
        },
        add(){
            uni.navigateTo({
            	 url: `/pages/version1/add_friend?avatar=${this.dataList.avatar}&nickName=${this.dataList.nickName}&sign=${this.dataList.sign}`
            })
        }
    }  
}  
</script>
  
<style scoped>  
.container {  
  padding: 20rpx;  
}  

.search-container {
	display: flex;
	align-items: center;
	padding: 20rpx;
	margin-bottom: 20rpx;
	background-color: #f0f0f0;
	border-radius: 8rpx;
}

.search-icon {  
  font-size: 36rpx;
  margin-right: 20rpx;
}  

.search-input {  
  flex: 1;  
  height: 60rpx;  
  border: none;
  background-color: transparent;
  font-size: 28rpx;
}  

.friend-list {  
  padding: 20rpx;
}  

.friend-item {  
  display: flex;  
  align-items: center;  
  justify-content: space-between; /* Button placed at the end */
  margin-bottom: 20rpx;  
}  

.avatar-row {
    display: flex;
    align-items: center;
}

.avatar {  
  width: 100rpx;  
  height: 100rpx;  
  border-radius: 50%;  
  margin-right: 20rpx;
}  

.info {
	flex: 1;
}

.name-sign {  
  display: flex;
  flex-direction: column; /* Stack name and sign vertically */
}  

.name {  
  font-size: 30rpx;  
  font-weight: bold;
  margin-bottom: 10rpx;
}  

.sign {  
  color: #999;  
  font-size: 24rpx;
}  

.add-button {  
  height: 60rpx;  
  line-height: 60rpx;  
  padding: 0 20rpx;  
  border-radius: 8rpx;  
  background-color: #007AFF;  
  color: #fff;  
  font-size: 28rpx;  
  text-align: center;  
  margin-right: 10rpx;
}  
</style>